<template>
  <div class="lang_container">
    <div class="main">
      <h3>基础使用</h3>
      <p>语系存在的：{{ translateI18n("text") }}</p>
      <p>语系不存在的：{{ translateI18n("abc") }}</p>
      <p>语系不存在的blankTE为true：{{ translateI18n("abc", true) }}</p>
    </div>
    <div class="main">
      <h3>通过对象的方式替换语系内容</h3>
      <p>
        语系存在的：{{ fillTranslateI18n("info", { name: "张三", age: 18 }) }}
      </p>
      <p>
        语系不存在的：{{ fillTranslateI18n("abc", { name: "张三", age: 18 }) }}
      </p>
      <p>
        语系不存在的blankTE为true：{{
          fillTranslateI18n("abc", { name: "张三", age: 18 }, true)
        }}
      </p>
    </div>
    <div class="main">
      <h3>通过数组的方式替换语系内容</h3>
      <p>语系存在的：{{ fillTranslateI18n("frist", [1, 2]) }}</p>
      <p>语系不存在的：{{ fillTranslateI18n("abc", [1, 2]) }}</p>
      <p>
        语系不存在的blankTE为true：{{ fillTranslateI18n("abc", [1, 2], true) }}
      </p>
    </div>
    <div class="main">
      <h3>使用标签语系替换指定语系</h3>
      <div>
        语系存在的：
        <p v-html="fillTranslateI18n('html', { count: count })" />
      </div>
      <div>
        语系不存在的：
        <p v-html="fillTranslateI18n('abc', { count: count })" />
      </div>
      <div>
        语系不存在的blankTE为true：
        <p v-html="fillTranslateI18n('abc', { count: count }, true)" />
      </div>
    </div>
    <div class="main">
      <h3>使用useI18n里面t</h3>
      <p>{{ t("text") }}</p>
      <p>{{ t("info", { name: "张三", age: 18 }) }}</p>
      <p>{{ t("frist", [1, 2]) }}</p>
      <p v-html="t('html',{ count: count })"></p>
    </div>
  </div>
</template>
<script setup>
import { translateI18n, fillTranslateI18n } from "@/utils/i18n";
import { useI18n } from "vue-i18n";
const { t } = useI18n();
const count = 2;
</script>
<style lang="scss" scoped>
.lang_container {
  @include flex(flex-start, stretch, column, 20px);
  .main {
    min-height: 100px;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 10px;
    @include flex(flex-start, flex-start, column, 10px);
  }
}
</style>
